<template>
  <!-- 最外层的容器 -->
  <view class="my-settle-container">
    <!-- 全选区域 -->
    <!-- 绑定点击事件=>点击全选按钮让所有的小按钮的状态跟着变 -->
    <label class="radio" @click="updataState">
      <radio color="#C00000" :checked="isFullCheck" /><text>全选</text>
    </label>

    <!-- 合计区域 -->
    <view class="amount-box">
      合计:<text class="amount">￥{{checkedGoodsAmount}}</text>
    </view>

    <!-- 结算区域 -->
    <view class="btn-settle" @click="settlement">结算({{checkedCount}})</view>
  </view>
</template>

<script>
  import {
    mapGetters,
    mapMutations,
    mapState
  } from 'vuex'
  export default {
    name: "my-settle",
    data() {
      return {
        second: 3, //秒数
        timerId: null //定时器id
      };
    },
    methods: {
      ...mapMutations('m_cart', ['updateAllGoodsState']),
      ...mapMutations('m_user', ['updateRedirectInfo']),

      // 点击全选=>让所有的小按钮的状态变化
      updataState() {
        // isFullCheck 这个属性能够监听到 需要购买的商品数量是否等于购物车总数量
        // 如果相等:true 点击全选按钮,需要是全不选,因此需要取反
        // 如果不想等:false 点击全选按钮,需要是全选,因此需要取反
        this.updateAllGoodsState(!this.isFullCheck)
      },

      // 进行结算的逻辑功能
      settlement() {
        // 判断用户是否勾选了需要购买的商品
        if (!this.checkedCount) return uni.$showMsg('请先勾选需要购买的商品!')
        // 判断用户是否有收货地址
        if (!this.addStr) return uni.$showMsg('请先选择收货地址!')
        // 判断用户是否登录
        // if(!this.token) return uni.$showMsg('请先登录!')
        // 没有登录,触发delayNavigate方法
        if (!this.token) return this.delayNavigate()

        // 发起微信支付
        this.payOrder()
      },

      // 1.创建订单
      async payOrder() {
        // 1.1准备订单需要的请求参数
        const orderInfo = {
          //公司里,应该写成checkedGoodsAmount  这里订单总价写死为1分钱,不然真的支付你也没有那么多钱
          order_price: 0.01,
          consignee_addr: this.addStr,
          goods: this.cart.filter(item => item.goods_state).map(item => ({
            goods_id: item.goods_id,
            goods_number: item.goods_number,
            goods_price: item.goods_price
          }))
        }
        // 1.2发起创建订单请求
        const {
          data: createRes
        } = await uni.$http.post('/my/orders/create', orderInfo)

        if (createRes.meta.status !== 200) return uni.$showMsg('订单创建失败!')
        // console.log(createRes)  //因为我的token是随便写的,所以获取401,获取失败
        // console.log(createRes.message.order_number)  //得到订单编号  假设GD20180504000000000045
        // 1.3 获取订单编号
        const orderNumber = createRes.message.order_number

        // 2.订单预支付
        // 2.1发起订单预支付请求
        const {
          data: aheadRes
        } = await uni.$http.post('/my/orders/req_unifiedorder', {
          order_number: orderNumber
        })

        if (aheadRes.meta.status !== 200) return uni.$showMsg('订单创建失败!')

        // 2.2获取到支付必须的一些参数
        // console.log(aheadRes.message.pay)
        const pay = aheadRes.message.pay

        // 3.调用API发起微信支付
        const [err, payRes] = await uni.requestPayment(pay)

        if (err) return uni.$showMsg('支付失败!')

        // 4.判断订单是否真的支付成功==>orderNumber订单编号
        const {
          data: res
        } = await uni.$http.post('/my/orders/chkOrder', {
          order_number: orderNumber
        })

        if (res.meta, status !== 200) return uni.$showMsg('支付失败!')

        uni.showToast({
          title: '支付成功',
          icon: 'success'
        })
      },

      // 专门用来处理倒计时的方式
      delayNavigate() {
        // 再次点击的时候清除定时器,并将秒数设为3,重新显示弹框
        clearInterval(this.timerId)
        this.second = 3
        this.showTips(this.second)

        this.timerId = setInterval(() => {
          if (this.second > 1) {
            this.second--
            this.showTips(this.second)
            return
          }
          // 秒数数完就跳转到我的页面
          uni.switchTab({
            url: '/pages/my/my',
            // 跳转成功之后
            success: () => {
              this.updateRedirectInfo({
                // 用这个方法,把这两个字段传递给redirectInfo状态里
                openType: 'switchTab',
                from: '/pages/cart/cart'
              })
            }
          })
          clearInterval(this.timerId)
        }, 1000)
      },

      // 专门用来显示倒计时弹框
      showTips(n) {
        uni.showToast({
          icon: 'none',
          title: '您还没登录,' + n + '秒后将跳转登录界面',
          duration: 1500,
          mask: true
        })
      }
    },

    computed: {
      // 映射结算数量的方法
      ...mapGetters('m_cart', ['checkedCount', 'total', 'checkedGoodsAmount']),
      // 收货地址
      ...mapGetters('m_user', ['addStr']),
      // token
      ...mapState('m_user', ['token']),
      ...mapState('m_cart', ['cart']),

      // 判断全选按钮的状态
      isFullCheck() {
        // 如果购物车上的数量和结算上的数量一样,就是true,不一样就是false,给单选按钮的checked属性=>这样就是根据多个小按钮的状态决定了全选按钮的状态
        return this.checkedCount === this.total
      }
    }
  }
</script>

<style lang="scss">
  .my-settle-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    // 将背景色从 cyan 改为 white
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 5px;
    font-size: 14px;

    .radio {
      display: flex;
      align-items: center;
    }

    .amount {
      color: #c00000;
    }

    .btn-settle {
      height: 50px;
      min-width: 100px;
      background-color: #c00000;
      color: white;
      line-height: 50px;
      text-align: center;
      padding: 0 10px;
    }

    z-index: 99;
  }
</style>
